<template>
  <div class='container'>
    <el-card style="margin:10px">
      <!-- 第一排 -->
      <el-row type="flex" justify="space-between">
        <el-col style="color:#ffc9cc;font-size:12px">说明:&nbsp;&nbsp;&nbsp;目前支持学科和关键字条件筛选</el-col>
        <el-row type="flex" justify="end">
          <el-col>
            <el-button type="success" icon="el-icon-edit" size="small" @click="$router.push('new')">新增试题</el-button>
          </el-col>
        </el-row>
      </el-row>
      <!-- 第二排 表单-->
      <el-form ref="form" :model="formData">
        <!-- 表单第一排 -->
        <el-row type="flex" justify="space-around" style="margin-top:20px">
          <el-col :span="6" style="margin-left:30px">
            <el-form-item label="学科">
          <el-select v-model="formData.subjectID">
            <el-option v-for="(obj,index) in subjects" :key="index" :label="obj.subjectName" :value="obj.subjectName"></el-option>
          </el-select>
        </el-form-item>
          </el-col>
        <el-col :span="6" style="margin-left:-30px">
           <el-form-item label="二级目录">
          <el-select v-model="formData.catalogID">
            <el-option v-for="item in directorysList" :key="item.id" :label="item.directoryName" :value="item.directoryName"></el-option>
          </el-select>
        </el-form-item>
        </el-col>
         <el-col :span="6">
           <el-form-item label="标签">
          <el-select v-model="formData.tags">
            <el-option v-for="item in tagsList" :key="item.id" :label="item.tagName" :value="item.tagName"></el-option>
          </el-select>
        </el-form-item>
         </el-col>
        <el-col :span="6">
           <el-form-item label="关键字">
          <el-input placeholder="根据题干搜索" style="width:220px" v-model="formData.keyword"></el-input>
        </el-form-item>
        </el-col>
        </el-row>
        <!-- 表单第二排 -->
        <el-row type="flex" justify="space-around">
         <el-col :span="6">
           <el-form-item label="试题类型">
             <el-select v-model="formData.questionType">
               <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.label"></el-option>
             </el-select>
           </el-form-item>
         </el-col >
         <el-col :span="6" style="margin-left:30px">
           <el-form-item label="难度">
             <el-select v-model="formData.difficulty">
               <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.label" ></el-option>
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="6" style="margin-left:-25px">
           <el-form-item label="方向">
             <el-select v-model="formData.direction">
               <el-option v-for="(item,index) in direction" :key="index" :label="item" :value="item"></el-option>
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="录入人">
             <el-select v-model="formData.creatorID">
               <el-option v-for="item in userInfo" :key="item.id" :label="item.username" :value="item.username"></el-option>
             </el-select>
           </el-form-item>
         </el-col>
        </el-row>
        <!-- 表单第三排 -->
        <el-row type="flex" justify="space-around">
         <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input style="width:220px" v-model="formData.remarks"></el-input>
          </el-form-item>
         </el-col>
          <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input style="width:220px" v-model="formData.shortName"></el-input>
          </el-form-item>
         </el-col>
          <el-col :span="6">
          <el-form-item label="城市">
            <el-select style="width:110px;margin-right:5px" v-model="formData.province" @change="changeCityFn" >
              <!-- 市start -->
              <el-option v-for="(item,index) in province" :key="index" :label="item" :value="item"></el-option>
              <!-- 市end -->
            </el-select>
            <el-select style="width:110px" v-model="formData.city">
              <!-- 区、县start -->
              <el-option v-for="(item , index) in area" :key="index" :label="item" :value="item"></el-option>
              <!-- 区，县end -->
            </el-select>
          </el-form-item>
         </el-col>
           <el-col :span="6" >
             <el-row type="flex" justify="end">
               <el-col></el-col>
               <el-col>
                 <el-button size="small" @click="clearFn">清除</el-button>
             <el-button size="small" type="primary" @click="searchFn">搜索</el-button>
               </el-col>
             </el-row>
           </el-col>
        </el-row>
      </el-form>
      <!-- tab栏 -->
      <el-tabs v-model="activeName" type="card" @tab-click="choice">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="wait"></el-tab-pane>
        <el-tab-pane label="已审核" name="isOk"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="isNo"></el-tab-pane>
      </el-tabs>
      <!-- 显示数据的总数 -->
      <el-alert type="info" :closable="false" show-icon :title="`数据一共${pageList.total}条`"></el-alert>
      <!-- 数据的表格 -->
      <el-table style="margin-top:20px" :data="tableData" >
        <el-table-column align="center" width="120px" prop="number" label="试题编号"></el-table-column>
        <el-table-column align="center" width="120px" prop="subject" label="学科"></el-table-column>
        <el-table-column align="center" width="120px" prop="catalog" label="目录"></el-table-column>
        <el-table-column align="center" width="120px" prop="questionType" label="题型" :formatter="questionTypes"></el-table-column>
        <el-table-column align="center" width="280px" prop="question" label="题干">
         <template slot-scope="{ row }">
          <div v-html="row.question"></div>
         </template>
        </el-table-column>
        <el-table-column align="center" width="180px" prop="addDate" label="录入时间"></el-table-column>
        <el-table-column align="center" width="80px" prop="difficulty" label="难度" :formatter="difficultys"></el-table-column>
        <el-table-column align="center" width="120px" prop="creator" label="录入人"></el-table-column>
        <el-table-column align="center" width="120px" prop="chkState" label="审核状态" :formatter="chkState"></el-table-column>
        <el-table-column align="center" width="150px" prop="chkRemarks" label="审核意见"></el-table-column>
        <el-table-column align="center" width="120px" prop="chkUser" label="审核人"></el-table-column>
        <el-table-column align="center" width="150px" prop="publishState" label="发布状态" :formatter="publishState"></el-table-column>
        <el-table-column align="center" width="200px" label="操作" fixed="right">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="perviewFn(row)">预览</el-button>
          <el-button type="text" :disabled="row.chkState !== 0" size="small" @click="checkFn(row)">审核</el-button>
          <el-button type="text" :disabled="row.questionType !== '1'" size="small" @click="routerPush(row)">修改</el-button>
          <el-button type="text" size="small" @click="upDown(row)">{{row.publishState === 0? '上架' : '下架'}}</el-button>
          <el-button type="text" :disabled="row.publishState === 1" size="small" @click="delFn(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
     <el-row type="flex" justify="end" align="middle">
       <el-col :span="8">
        <el-pagination
       background
       layout="prev, pager, next,sizes, jumper"
       :total="pageList.total">
      </el-pagination>
       </el-col>
     </el-row>
     <!-- 预览展示框start -->
     <QuestionsPerview ref="QuestionsPerview"/>
     <!-- 预览展示框end -->
     <!-- 审核展示框start -->
     <QuestionsCheck ref="QuestionsCheck" @choice="choice"/>
     <!-- 审核展示框end -->
    </el-card>
    </div>
</template>

<script>
// 获取精品题库列表 choice  // 导入获取试题答案列表detail //导入删除数据模块remove //导入京选题库上下架接口choicePublish
import { choice, detail, remove, choicePublish } from '@/api/hmmm/questions'
// 导入格式化时间的插件
import moment from 'moment'
// 导入省份和城市信息
import { provinces, citys } from '@/api/hmmm/citys'
// 获取学科列表数据list
import { list } from '@/api/hmmm/subjects'
// 获取目录列表
import { directorysList } from '@/api/hmmm/directorys'
// 导入试题类型和难度,方向数据
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
// 导入  获取所有用户信息
import { userList } from '@/api/base/users'
// 导入  获取所有标签列表
import { tagsList } from '@/api/hmmm/tags'
// 导入  试题预览对话框
import QuestionsPerview from '../components/questions-preview.vue'
// 导入   试题审核对话框
import QuestionsCheck from '../components/questions-check.vue'
export default {
  data () {
    return {
      // 定义表单数据
      formData: {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 市
        city: '' // 城市
      },
      // 定义城市数据
      province: [],
      // 定义表格数据
      tableData: [],
      // 定义所有学科信息
      subjects: [],
      // 定义所有问题类型
      questionType: [],
      // 定义所有难度
      difficulty: [],
      // 定义所有方向
      direction: [],
      // 定义用户信息
      userInfo: [],
      // 定义目录列表信息
      directorysList: [],
      // 定义标签列表信息
      tagsList: [],
      // 定义被选中的tab栏
      activeName: 'all',
      // 定义审核按钮是否被禁用
      checkDisabled: false,
      // 定义请求数据的页数和条数
      pageList: {
        page: 1,
        pagesize: 5,
        total: 0
      }
    }
  },
  components: {
    // 注册预览框
    QuestionsPerview,
    // 注册审核框
    QuestionsCheck
  },
  async created () {
    // 加载页面  获取所有表格数据
    this.choice()
    // 加载页面  获取所有的城市数据
    this.province = provinces()
    // 页面加载   获取所有学科数据
    const { data } = await list()
    this.subjects = data.items
    // 页面加载  获取所有问题类型数据
    this.questionType = questionType
    this.difficulty = difficulty
    this.direction = direction
    // 加载页面  获取用户信息
    this.userList()
    // 加载页面  获取目录信息列表
    this.directoryList()
    // 加载页面  获取标签列表信息
    this.tagList()
  },
  computed: {
    // 区，县的数据是由城市的数据计算得到的
    area () {
      return citys(this.formData.province)
    }
  },
  methods: {
    // 获取所有文章详情
    async choice () {
      this.tableData = []
      const { data } = await choice(this.pageList)
      this.changeFn(data)
      console.log(this.tableData)
      this.pageList.total = this.tableData.length
    },
    // 获取标签列表信息
    async tagList () {
      const { data } = await tagsList()
      this.tagsList = data.items
    },
    // 获取用户信息
    async userList () {
      const { data } = await userList({ page: 1, pagesize: 99999 })
      this.userInfo = data.list
    },
    // 获取所有目录列表
    async directoryList () {
      const { data } = await directorysList()
      this.directorysList = data.items
    },
    // 格式化题型
    questionTypes (row, column, cellValue, index) {
      // 利用moment格式化时间
      row.addDate = moment(row.addDate).format('YYYY-MM-DD HH:mm:ss')
      if (row.questionType === '1' || row.questionType === '单选题') {
        return '单选'
      } else if (row.questionType === '2' || row.questionType === '多选题') {
        return '多选'
      } else {
        return '简答'
      }
    },
    // 格式化难度
    difficultys (row) {
      if (row.difficulty === '1' || row.difficulty === '简单') {
        return '简单'
      } else if (row.difficulty === '2' || row.difficulty === '一般') {
        return '一般'
      } else {
        return '困难'
      }
    },
    // 当城市发生改变时 相应的县也发生改变
    changeCityFn () {
      this.formData.city = ''
      citys(this.formData.province)
    },
    // 格式化状态
    chkState (row) {
      if (row.chkState === 0) {
        return '待审核'
      } else if (row.chkState === 1) {
        return '已审核'
      } else {
        return '已拒绝'
      }
    },
    publishState (row) {
      if (row.publishState === 0) {
        return '已下架'
      } else if (row.publishState === 1) {
        return '已发布'
      } else {
        return '待发布'
      }
    },
    // 点击清除按钮时  清空表单
    async clearFn () {
      await this.$confirm('你确定要清除吗？')
      this.formData = {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 市
        city: '' // 城市
      }
    },
    // 点击搜索时筛选文章列表并渲染
    async searchFn () {
      await this.choice()
      this.tableData = this.tableData.filter(obj => obj.subject === this.formData.subjectID || this.formData.subjectID === '' || (obj.question.indexOf(this.formData.keyword) !== -1 && this.formData.keyword !== ''))
    },
    // 点击预览触发start
    perviewFn (row) {
      this.$refs.QuestionsPerview.showDialog = true
      // 根据数值判断题目类型start
      if (row.questionType === '1') {
        row.questionType = '单选题'
      } else if (row.questionType === '2') {
        row.questionType = '多选题'
      } else if (row.questionType === '3') {
        row.questionType = '简答题'
      }
      // 根据数值判断题目类型end
      // 根据数值判断题目难易程度start
      if (row.difficulty === '1') {
        row.difficulty = '简单'
      } else if (row.difficulty === '2') {
        row.difficulty = '一般'
      } else if (row.difficulty === '3') {
        row.difficulty = '困难'
      }
      // 根据数值判断题目难易程度end
      this.$refs.QuestionsPerview.rowData = row
      // 获取答案列表
      this.detail(row)
    },
    // 点击审核触发
    checkFn (row) {
      this.$refs.QuestionsCheck.showDialog = true
      this.$refs.QuestionsCheck.formData.id = row.id
    },
    // 点击删除按钮触发
    async delFn (row) {
      await this.$confirm('您确定要删除吗？')
      await remove(row)
      this.$message.success('删除成功')
      this.choice()
    },
    // 点击修改跳转路由并携带row参数
    routerPush (row) {
      this.$router.push({
        path: 'new',
        query: row
      })
    },
    // 点击上下架按钮触发
    async upDown (row) {
      if (row.publishState === 0) {
        await this.$confirm('你确定要下架吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        row.publishState = 1
        await choicePublish(row)
      } else {
        await this.$confirm('你确定要上架吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        row.publishState = 0
        await choicePublish(row)
      }
      await this.choice()
      console.log(this.tableData)
    },
    async detail (row) {
      const { data } = await detail(row)
      this.$refs.QuestionsPerview.questions = data.options
      this.$refs.QuestionsPerview.articleInfo = data
    },
    // 当点击tab栏时  筛选获取到的数据
    changeFn (data) {
      data.items.forEach(obj => {
        if (this.activeName === 'all') {
          this.tableData = data.items
        } else if (this.activeName === 'wait' && obj.chkState === 0) {
          console.log(obj)
          this.tableData.push(obj)
        } else if (this.activeName === 'isOk' && obj.chkState === 1) {
          this.tableData.push(obj)
        } else if (this.activeName === 'isNo' && obj.chkState === 2) {
          this.tableData.push(obj)
        }
      })
    }
  }
}
</script>

<style scoped lang='less'>
</style>
